import React, { useState, useEffect } from 'react'
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import { Grid, Typography, Avatar } from '@material-ui/core';
import { Image } from 'components/atoms';
import { SectionHeader } from 'components/molecules';
import { Section } from 'components/organisms';
import { Icon } from 'components/atoms';
import { useHistory } from 'react-router-dom/cjs/react-router-dom.min';

import { useSelector, useDispatch } from 'react-redux'
import { callGetNewsApi } from 'utils/networking';
const useStyles = makeStyles(theme => ({
    root: {
        width: '100%',
        height: '100%',
        position: 'relative',
        minHeight: "100vh",
        background: '#000',
    },
    backgroundImage: {
        width: '100%',
        height: '100%',
        position: 'absolute',

        backgroundSize: '100% 100%',
        [theme.breakpoints.up('sm')]: {
            backgroundSize: '100% 130%',
        },
        [theme.breakpoints.up('md')]: {
            backgroundSize: '100% 150%',
            padding: "50px",
        },
        [theme.breakpoints.up('lg')]: {
            backgroundSize: '100% 180%',
        },
        opacity: "0.6",
        zIndex: 1
    },
    image: {
        minHeight: "100vh",
        maxHeight: "100vh",
    },
    section: {
        padding: "20px",
        position: 'relative',
        zIndex: 10,
        [theme.breakpoints.up('md')]: {
            padding: "30px",
        },
    },
    avatarContainer: {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        flexWrap: "wrap",
        [theme.breakpoints.up('md')]: {
            justifyContent: 'start',
            flexWrap: "nowrap",
        },
    },
    avatar: {
        width: "120px",
        height: "120px",
        [theme.breakpoints.up('md')]: {
            width: "160px",
            height: "160px",
        },
    },
    profileTitle: {
        fontSize: "24px",
        fontWeight: "bold",
        flex: '0 0 auto',
        whiteSpace: 'nowrap',
        color: "#fff",
        [theme.breakpoints.up('md')]: {
            marginTop: "0",
            fontSize: "32px",
        },
    },
    profileText: {
        flex: '0 0 auto',
        whiteSpace: 'nowrap',
        color: "#fff",
        fontSize: "16px",
        lineHeight: "18px",
        [theme.breakpoints.up('md')]: {
            fontSize: "20px",
            lineHeight: "24px",
        },
    },
    profileBrief: {
        color: "#fff",
        fontSize: "16px",
        opacity: "0.7",
        width: "100%",
        [theme.breakpoints.up('md')]: {
            fontSize: "20px",
            width: "70%",
        },
    },
    grid: {
        margin: "10px 0 50px",
        [theme.breakpoints.up('md')]: {
            margin: "0",
        },
    },
    gridItem: {
        width: "100%",
        marginLeft: "0",
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'column',
        marginBottom: "20px",
        [theme.breakpoints.up('md')]: {
            width: "auto",
            marginLeft: "30px",
            display: 'block',
        },
        [theme.breakpoints.up('lg')]: {
            marginLeft: "50px",
        },
    },
    gridItem1: {
        padding: "0",
        width: "33%",
        [theme.breakpoints.up('md')]: {
            width: "auto",
            padding: "0 50px",
        },
        "& p": {
            textAlign: "center",
        },
        "& p:nth-of-type(1)": {
            marginBottom: "10px",
        },
        "&:nth-of-type(2)": {
            borderLeft: "1px solid #fff",
            borderRight: "1px solid #fff",
        },
    },
    topPlayed: {
        marginTop: "30px"
    },
    topPlayedImage: {
        height: "80px",
        width: "80px",
        borderRadius: "6px",
        overflow: "hidden",
        [theme.breakpoints.up('md')]: {
            width: "100px",
            height: "100px",
        },
    },
    img: {
        objectFit: "cover",
        verticalAlign: "middle",
    },
    topPlayedGrid: {
        padding: "10px 0 10px",
        flexWrap: "nowrap",
        cursor: "pointer",
    },
    topPlayedGridItem: {
        marginLeft: "10px",
        width: "100%",
        borderBottom: "1px solid rgba(255,255,255,0.6)",
        [theme.breakpoints.up('lg')]: {
            marginLeft: "20px",
        },
    },
    iconButton: {
        position: "relative",
        borderBottom: "1px solid rgba(255,255,255,0.6)",
    },
    topPlayedText: {
        overflow: "hidden",
        textOverflow: "ellipsis",
        whiteSpace: "nowrap",
        width: "150px",
        [theme.breakpoints.up('sm')]: {
            width: "400px",
        },
        [theme.breakpoints.up('md')]: {
            width: "600px",
        },
    },
    viewAll: {
        padding: "20px 0",
    },
    button: {
        color: "#43bae1",
        fontSize: "16px",
        lineHeight: "18px",
        cursor: "pointer",
        fontWeight: 700,
        [theme.breakpoints.up('md')]: {
            fontSize: "20px",
        },
        display: "inline-block"
    },
}));

function MyProfile(props) {
    const { data, className, ...rest } = props;
    const classes = useStyles();
    const profileData = useSelector((state) => state.auth.profileData)
    const PopularAlbumsData = useSelector((state) => state.cover.discovers?.top_albums?.data);

    const history = useHistory();
    const dispatch = useDispatch()

    const [playlists, setPlaylists] = useState([]);
    useEffect(() => {
        getServerPlaylistsProps()
    }, [])
    const getServerPlaylistsProps = async () => {
        if (!profileData || !profileData.id) {
            history.push(`signin`);
            return;
        }
        callGetNewsApi(`song/user_playlists?user_id=${profileData.id}&all=1`, dispatch, (data) => {
            console.log(data);
            setPlaylists(data);
        })
    }

    return (
        <div className={clsx(classes.root, className)} >
            <div style={{ backgroundImage: `url(${profileData ? profileData.backImage : "https://assets.maccarianagency.com/the-front/photos/rental/hero-bg-image@2x.jpg 2x"})` }} className={classes.backgroundImage}>

            </div>
            <Section className={classes.section} disablePadding fullWidth>
                <Grid className={classes.avatarContainer}>
                    <Grid item className={classes.gridItem}>
                        <Avatar {...{ src: profileData.avatarURL }} className={classes.avatar} />
                    </Grid>
                    <Grid item className={clsx(classes.gridItem)}>
                        <Typography variant="body2" color="textPrimary" className={clsx(classes.profileTitle)}>
                            {profileData.username}
                        </Typography>
                        <Typography variant="body2" color="textPrimary" className={clsx(classes.profileText,)}>
                            {profileData.username}
                        </Typography>
                        <Typography variant="body2" color="textPrimary" className={clsx(classes.profileText)} style={{ marginTop: "10px" }}>
                            {profileData.email}
                        </Typography>
                    </Grid>
                    <Grid item container className={classes.grid}>
                        <div className={classes.gridItem1}>
                            <Typography variant="body2" color="textPrimary" className={clsx(classes.profileText,)}>
                                {profileData.plays}
                            </Typography>
                            <Typography variant="body2" color="textPrimary" className={clsx(classes.profileText)}>
                                Plays
                            </Typography>
                        </div>
                        <div className={classes.gridItem1}>
                            <Typography variant="body2" color="textPrimary" className={clsx(classes.profileText,)}>
                                {profileData.following_count}
                            </Typography>
                            <Typography variant="body2" color="textPrimary" className={clsx(classes.profileText)}>
                                Followings
                            </Typography>
                        </div>
                        <div className={classes.gridItem1}>
                            <Typography variant="body2" color="textPrimary" className={clsx(classes.profileText,)}>
                                {profileData.followers_count}
                            </Typography>
                            <Typography variant="body2" color="textPrimary" className={clsx(classes.profileText)}>
                                Followers
                            </Typography>
                        </div>
                    </Grid>
                </Grid>
                <div>
                    <Typography variant="body2" color="textPrimary" className={clsx(classes.profileTitle)}>
                        About
                    </Typography>
                    <Typography variant="body2" color="textPrimary" className={clsx(classes.profileBrief,)}>
                        {profileData.brief}
                    </Typography>
                </div>

                <div>
                    <Typography variant="body2" color="textPrimary" className={clsx(classes.topPlayed, classes.profileTitle)}>
                        Top played songs
                    </Typography>
                    {PopularAlbumsData && PopularAlbumsData.map((item, index) => (<Grid container className={classes.topPlayedGrid} key={index} onClick={() => {
                        window.location.href =  `${process.env.REACT_APP_SERVER_URL}player/album/${item.id}`;
                    }}>
                        <Grid item>
                            <div className={classes.topPlayedImage}>
                                <Image
                                    src={item.image}
                                    alt={item.image}
                                    srcSet={item.image}
                                    lazyProps={{ width: '100%', height: '100%' }}
                                    className={classes.img}
                                />
                            </div>
                        </Grid>
                        <Grid item className={classes.topPlayedGridItem} container direction="column" justifyContent="center">
                            <Typography className={clsx(classes.profileTitle, classes.topPlayedText)}>{item.title}</Typography>
                            <Typography className={clsx(classes.profileText, classes.topPlayedText)}>{item.artistName}</Typography>
                        </Grid>

                        <Grid item container justifyContent='flex-end' alignItems='center' className={classes.iconButton} onClick={(e) => {
                            e.stopPropagation()
                        }}>
                            <Icon
                                fontIconClass="fas fa-ellipsis-v"
                                style={{ color: "#fff", margin: "0 10px", zIndex: 19 }}
                            />
                            {/* <ul className={clsx(classes.ul, classes.ul1)} style={{ display: choosePlaylist == index ? "block" : "none" }}>
                                <div className={classes.ulHead}>Choose Playlist
                                    <Icon
                                        fontIconClass="fa fa-times"
                                        size="small"
                                        style={{ opacity: 0.5, cursor: "pointer" }}
                                        onClick={() => setChosePlaylist(null)}
                                    />
                                </div>
                                <div className={classes.content}>
                                    {
                                        playlists.map((ele, i) => <li className={clsx(classes.li, classes.li1)} onClick={(e) => handleAddPlaylists(e, ele.name, item.id)} key={i}>
                                            {ele.name}
                                        </li>)
                                    }
                                </div>
                                <div className={classes.ulFoot} onClick={() => showModal(item.id)}>
                                    <Icon
                                        fontIconClass="fas fa-plus"
                                        style={{ color: "#000", margin: "0 10px", zIndex: 30, fontSize: "12px" }}
                                    />
                                    New playlist
                                </div>
                            </ul> */}
                        </Grid>
                    </Grid>))}
                </div>
                <div>
                    <Typography variant="body2" color="textPrimary" className={clsx(classes.topPlayed, classes.profileTitle)}>
                        Top playlists
                    </Typography>
                    {playlists && playlists.map((item, index) => (<Grid container className={classes.topPlayedGrid} key={index} onClick={() => {
                        window.location.href = `${process.env.REACT_APP_SERVER_URL}player/album/${item.id}`;
                    }}>
                        <Grid item>
                            <div className={classes.topPlayedImage}>
                                <Image
                                    src={item.remoteAvatarPath}
                                    alt={item.remoteAvatarPath}
                                    srcSet={item.remoteAvatarPath}
                                    lazyProps={{ width: '100%', height: '100%' }}
                                    className={classes.img}
                                />
                            </div>
                        </Grid>
                        <Grid item className={classes.topPlayedGridItem} container direction="column" justifyContent="center">
                            <Typography className={clsx(classes.profileTitle, classes.topPlayedText)}>{item.name}</Typography>
                            <Typography className={clsx(classes.profileText, classes.topPlayedText)}>{item.songs.length} Songs</Typography>
                        </Grid>
                    </Grid>))}
                </div>

                <div className={classes.viewAll}>
                    <div className={classes.button} onClick={() => history.push("/discover/all")}>View All</div>
                </div>
            </Section>
        </div>
    )
}

MyProfile.propTypes = {
    /**
     * External classes
     */
    className: PropTypes.string,
};

export default MyProfile

